<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
    <link rel="shotcut icon" href="images/title.jpg">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/normalize.css">
</head>
<body>
    <div class="app w">
        <!-- 头部部分 -->
        <header>
            <div class="ht w">
                <div class="logo">
                    <img src="images/logo1.jpg" alt="">
                </div>
                <ul>
                    <li class="green"><a href="#">音乐馆</a></li>
                    <li><a href="#">我的音乐</a></li>
                    <li><a href="#">客户端</a></li>
                    <li><a href="#">开放平台</a></li>
                    <li><a href="#">vip</a></li>
                </ul>
                <!-- 搜索框 -->
                <div class="search">
                    <input type="search" value="" placeholder="搜索音乐、MV、歌单、用户">
                </div>
                <div class="denglu"><a href="#">登录</a></div>
            
            </div>
               
            <div class="hf">
                <ul>
                    <li><a href="#" class="gre">首页</a></li>
                    <li><a href="#">歌手</a></li>
                    <li><a href="#">新碟</a></li>
                    <li><a href="#">排行榜</a></li>
                    <li><a href="#">分类歌单</a></li>
                    <li><a href="#">电台</a></li>
                    <li><a href="#">MV</a></li>
                    <li><a href="#">数字专辑</a></li>
                    <li><a href="#">票务</a></li>
                </ul>
            </div>
        </header>
        <!-- 主体版块1 -->
        <div class="main1 w">
        <!-- 推荐部份1 -->
        <h2 class="tuijian1">歌单推荐</h2>
        <!-- 导航栏部分1 -->
        <div class="nav1">
            <ul>
                <li><a href="#" class="green">为你推荐</a></li>
                <li><a href="#">网络歌曲</a></li>
                <li><a href="#">伤感</a></li>
                <li><a href="#">英语</a></li>
                <li><a href="#">官方歌曲</a></li>
                <li><a href="#">情歌</a></li>
            </ul>
        </div>
        <!-- 主体内容1 -->
        <div class="article1">
            <ul>
                <li>
                    <a href="#"><img src="images/article1.jpg" alt=""></a>
                    <span class="wenzi1">马伯骞私藏</span>
                    <span class="number1">播放量：6.0万</span>
                </li>
                <li><a href="#"><img src="images/article2.jpg" alt=""></a>
                    <span class="wenzi1">中国Ropper-说唱也能登峰造极</span>
                    <span class="number1">播放量：17.7万</span></li>
                <li><a href="#"><img src="images/article3.jpg" alt=""></a>
                    <span class="wenzi1">全名K歌翻唱热歌榜盘点</span>
                    <span class="number1">播放量：31.4万</span></li>
                <li><a href="#"><img src="images/article4.jpg" alt=""></a>
                    <span class="wenzi1">持更.B站高燃混检BGM精选</span>
                    <span class="number1">播放量：17.0万</span></li>
                <li><a href="#"><img src="images/article5.jpg" alt=""></a>
                    <span class="wenzi1">神仙翻唱|有一种飘飘然的感觉</span>
                    <span class="number1">播放量：22.5万</span></li>
            </ul>
        </div>
    </div>
    <!-- 主体版块2 -->
    <div class="main2 w">
        <!-- 推荐部份2 -->
        <h2 class="tuijian2">新歌首发</h2>
        <!-- 导航栏部分2 -->
        <div class="nav2">
            <div class="all w"><a href="#">播放全部</a></div>
                <ul>
                    <li><a href="#" class="green">最新</a></li>
                    <li><a href="#">内地</a></li>
                    <li><a href="#">港台</a></li>
                    <li><a href="#">欧美</a></li>
                    <li><a href="#">韩国</a></li>
                    <li><a href="#">日本</a></li>
                </ul>
            </div>
        <!-- 主体内容2 -->
        <div class="article2">
            <ul>
                <li>
                    <a href="#"><img src="images/article6.jpg" alt=""></a>
                    <div class="wenzi2">浴火成诗《烈火如歌》电视剧</div>
                    <div class="name1">张杰</div>
                    <span>05:37</span>
                </li>
                <li>
                    <a href="#"><img src="images/article7.jpg" alt=""></a>
                    <div class="wenzi2">对的人《美好生活》电视剧主</div>
                    <div class="name1">庄心妍</div>
                    <span>05:37</span>
                </li>
                <li>
                    <a href="#"><img src="images/article8.jpg" alt=""></a>
                    <div class="wenzi2">独孤天下《独孤天下》电视剧</div>
                    <div class="name1">李玉刚</div>
                    <span>05:37</span>
                </li>
                <li>
                    <a href="#"><img src="images/article9.jpg" alt=""></a>
                    <div class="wenzi2">我管你</div>
                    <div class="name1">华晨宇</div>
                    <span>05:37</span>
                </li>
                <li>
                    <a href="#"><img src="images/article10.jpg" alt=""></a>
                    <div class="wenzi2">出生地《为了这片土地》电影</div>
                    <div class="name1">毛阿敏</div>
                    <span>05:37</span>
                </li>
                <li>
                    <a href="#"><img src="images/article11.jpg" alt=""></a>
                    <div class="wenzi2">身后</div>
                    <div class="name1">苏诗丁</div>
                    <span>05:37</span>
                </li>
                <li>
                    <a href="#"><img src="images/article12.jpg" alt=""></a>
                    <div class="wenzi2">浴火成诗《烈火如歌》电视剧</div>
                    <div class="name1">迪丽热巴/毛不易</div>
                    <span>05:37</span>
                </li>
                <li>
                    <a href="#"><img src="images/article13.jpg" alt=""></a>
                    <div class="wenzi2">岁月</div>
                    <div class="name1">王菲/那英</div>
                    <span>05:37</span>
                </li>
                <li>
                    <a href="#"><img src="images/article14.jpg" alt=""></a>
                    <div class="wenzi2">亭亭山上松</div>
                    <div class="name1">孙杨</div>
                    <span>05:37</span>
                </li>
                
            </ul>
        </div>
    </div>
    <!-- 主体板块3 -->
    <div class="main3 w">
    <!-- 精彩推荐 -->
    <h2 class="tuijian3">精彩推荐</h2>
    <!-- 主体内容3 -->
    <div class="article3">
        <ul>
            <li><a href="#"><img src="images/article15.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/article16.jpg" alt=""></a></li>
        </ul>
    </div>
    </div>
    <!-- 主体模块4 -->
    <div class="main4 w">
        <!-- MV -->
       <h2 class="mv">MV</h2>
       <!-- 导航栏部分3 -->
       <div class="nav3">
        <ul>
            <li><a href="#" class="green">精选</a></li>
            <li><a href="#">内地</a></li>
            <li><a href="#">韩国</a></li>
            <li><a href="#">欧美</a></li>
            <li><a href="#">日本</a></li>
            <li><a href="#">港台</a></li>
        </ul>
       </div>
       <!-- 主体内容4 -->
       <div class="article4">
           <ul>
               <li><a href="#"><img src="images/mv1.jpeg" alt=""></a>
                <div class="wenzi3">BOSS</div>
                <div class="name2">NCT U</div>
                <div class="bofangliang">4493</div>
               </li>
               <li><a href="#"><img src="images/mv2.jpeg" alt=""></a>
                <div class="wenzi3">浴火成诗 (《烈火如歌》电视剧片)</div>
                <div class="name2">迪丽热巴</div>
                <div class="bofangliang">3.8万</div>
               </li>
               <li><a href="#"><img src="images/mv3.jpeg" alt=""></a>
                <div class="wenzi3">浴火成诗 (《烈火如歌》电视剧片</div>
                <div class="name2">迪丽热巴</div>
                <div class="bofangliang">3.8万</div>
               </li>
               <li><a href="#"><img src="images/mv4.jpeg" alt=""></a>
                <div class="wenzi3">BUTTERFLY EFFECTOR (《雏逻》)</div>
                <div class="name2">TRUE</div>
                <div class="bofangliang">256</div>
               </li>
               <li><a href="#"><img src="images/mv5.jpeg" alt=""></a>
                <div class="wenzi3">Vegetable</div>
                <div class="name2">Piko-Taro</div>
                <div class="bofangliang">5.5万</div>
               </li>
               <li><a href="#"><img src="images/mv6.jpeg" alt=""></a>
                <div class="wenzi3">PARTY (安藤なつ ver.)</div>
                <div class="name2">倖田來未</div>
                <div class="bofangliang">107</div>
               </li>
               <li><a href="#"><img src="images/mv7.jpeg" alt=""></a>
                <div class="wenzi3">Dear answer (《樱子小姐的脚下》)</div>
                <div class="name2">TRUE</div>
                <div class="bofangliang">53</div>
               </li>
               <li><a href="#"><img src="images/mv8.jpeg" alt=""></a>
                <div class="wenzi3">Cold</div>
                <div class="name2">Rich Brian</div>
                <div class="bofangliang">714</div>
               </li>
               <li><a href="#"><img src="images/mv9.jpeg" alt=""></a>
                <div class="wenzi3">Pain, pain (《你已藏在我心底》</div>
                <div class="name2">E-Girls</div>
                <div class="bofangliang">2161</div>
               </li>
               <li><a href="#"><img src="images/mv10.jpeg" alt=""></a>
                <div class="wenzi3">什么歌 (《捉妖记2》电影主题曲)</div>
                <div class="name2">五月天</div>
                <div class="bofangliang">5.5万</div>
               </li>
           </ul>
       </div>
    </div>
    <!-- 底部部分 -->
    <div class="foot">
        <div class="content">
            <p>关于腾讯 | About Tencent | 服务条款 | 用户服务协议 | 隐私政策 | 权利声明 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
            <p>Copyright © 1998 - 2021 Tencent. All Rights Reserved.</p>
            <p>腾讯公司 版权所有 腾讯网络文化经营许可证</p>
        </div>
    </div>
</div>
</body>
</html>